'use client';

import { useChat } from '@ai-sdk/react';
import { useEffect, useRef, useState } from 'react';
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';

export default function Page() {
    const { messages, input, handleInputChange, handleSubmit } = useChat({});
    const endRef = useRef<HTMLDivElement>(null)
    const [model, setModel] = useState("deepseeek-R3")
    const handleChangeModel = () => {
        setModel(model === 'deepseek_v3' ? 'deepseek_r1' : 'deepseek_v3')
    }
    useEffect(() => {
        if (endRef.current) {
            endRef?.current?.scrollIntoView({ behavior: 'smooth' })
        }
    }, [messages])
    return (
        <div className='flex flex-col h-screen justify-center '>
            <div className='flex flex-col w-2/3 overflow-auto justify-between flex-1'>
                <div className='h-4'></div>
                <div className='flex flex-col gap-8 flex-1'>
                    {messages.map(message => (
                        <div key={message.id}
                            className={`rounded-lg flex flex-row ${message?.role === 'assistant' ? 'justify-start mr-18' : 'justify-end ml-10'}`}
                        >
                            <p className={`inline-block p-2 rounded-lg ${message?.role === 'assistant' ? 'bg-blue-300' : 'bg-slate-300'} `}>
                                {message.content}
                            </p>
                        </div>
                    ))}
                    <div className='h-4' ref={endRef}>

                    </div>
                    {/* <form onSubmit={handleSubmit}>
                        <input name="prompt" value={input} onChange={handleInputChange} />
                        <button type="submit">Submit</button>
                    </form> */}
                </div>
            </div>

            <div className="flex flex-col items-center justify-center mt-4 shadow-lg border-2 p-2 border-gray-300 h-50 rounded-lg">
                <textarea className="w-full rounded-b-lg p-3 h-100 focus:outline-none" value={input} onChange={handleInputChange}></textarea>
                <div className="flex flex-row items-center justify-between w-full">
                    <div>
                        < p className="text-sm  rounded-md border-2 p-2 border-gray-300" onClick={handleChangeModel}>
                            深度思考 (R1)
                        </p>
                    </div>
                    <div className="flex items-center justify-center  border-2 mr-4 border-black p-1 rounded-full">
                        <ArrowCircleRightIcon onClick={handleSubmit}></ArrowCircleRightIcon>
                    </div>
                </div>

                <div>
                </div>
            </div>
        </div>
    );
}